<template>
  <div class="operation-box">
    <div class="title-name">
      {{ titleName }}
    </div>
    <div class="attention">
      <span class="name">关注度：</span>
      <div v-for="(item, index) in 5" :key="item.id">
        <div :class="attentionValue < index + 1 ? 'star' : 'active-star'"></div>
      </div>
    </div>
    <div class="operation-li" v-for="item in selectList" :key="item.id">
      <span class="name">{{ item.name }}：</span>
      <el-select
        v-if="item.type * 1 === 2"
        v-model="item.value"
        placeholder="请选择"
        style="width: 173px"
      >
        <el-option
          v-for="ite in item.options"
          :key="ite.value"
          :label="ite.label"
          :value="ite.value"
        >
        </el-option>
      </el-select>
      <span v-else class="text-value">{{ item.value }}</span>
    </div>
    <div class="step-name">合同履约记录</div>
    <div class="step-tab">
      <div :class="{ activeColor: stepValue * 1 === 1 }">合同实例前置工作</div>
      <div :class="{ activeColor: stepValue * 1 === 2 }">
        合同生效过程中工作
      </div>
    </div>
    <div class="step-container">
      <div class="step-li" v-for="item in stepList" :key="item.id">
        <div class="step-number">
          <div :class="getYuanColor(item.type, item.currentValue)"></div>
        </div>

        <div class="step-text" :class="getBgImg(item.type)">
          {{ item.value }}
        </div>
        <div
          v-if="
            (item.type * 1 === 1 && item.currentValue * 1 !== 1) ||
            item.type * 1 === 2
          "
          class="lines"
        ></div>
        <div
          v-if="item.type * 1 === 3 || item.currentValue * 1 === 1"
          class="nobg"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "operationNav",
  components: {},
  data() {
    return {
      attentionValue: 1, // 关注度值
      selectList: [
        {
          type: 2,
          name: "共享业务类型",
          value: "1",
          options: [
            { value: "1", label: "综合共享业务" },
            { value: "2", label: "双奶" },
          ],
        },
        {
          type: 2,
          name: "最新进度",
          value: "1",
          options: [
            { value: "1", label: "周期付款待开票" },
            { value: "2", label: "双奶" },
          ],
        },
        {
          type: 2,
          name: "合同签订年限",
          value: "1",
          options: [
            { value: "1", label: "2021" },
            { value: "2", label: "2022" },
          ],
        },
        {
          type: 2,
          name: "合作方(甲方)",
          value: "1",
          options: [
            { value: "1", label: "**公司" },
            { value: "2", label: "双奶" },
          ],
        },
        {
          type: 1,
          name: "合作时间信息",
          value: "2022-11-20",
        },
        { type: 1, name: "合作总金额", value: "100万" },
        { type: 1, name: "累计开票金额", value: "2022万" },
        { type: 1, name: "累计开票占比", value: "20%" },
        {
          type: 2,
          name: "是否执行完成",
          value: "1",
          options: [
            { value: "1", label: "综合共享业务" },
            { value: "2", label: "2022" },
          ],
        },
        {
          type: 2,
          name: "是否到期",
          value: "1",
          options: [
            { value: "1", label: "周期付款待开票" },
            { value: "2", label: "双奶" },
          ],
        },
      ],
      titleName: "PRO000N 济南移动综合共享业务合同",
      stepValue: 1, // tab步骤值
      stepList: [
        {
          value: "管理合同",
          type: 1,
        },
        {
          value: "管理周期共享明细",
          type: 2,
        },
        {
          value: "管理对账表",
          type: 1,
        },
        {
          value: "管理开票申请单",
          type: 1,
          currentValue: 1, // 当前步骤状态
        },
        {
          value: "管理付款资料",
          type: 3,
        },
        {
          value: "管理发票冲销说明",
          type: 3,
        },
        {
          value: "管理补充协议",
          type: 3,
        },
        {
          value: "管理清退说明",
          type: 3,
        },
      ],
    };
  },
  methods: {
    getBgImg(value, state) {
      if (value * 1 === 1) {
        return "old-step";
      } else if (value * 1 === 2) {
        return "warning-step";
      } else {
        return "next-step";
      }
    },
    getYuanColor(value, currentValue) {
      if (currentValue && currentValue * 1 === 1) {
        return "current-color";
      } else if (value * 1 === 1) {
        return "active-color";
      } else if (value * 1 === 2) {
        return "active-color";
      } else {
        return "no-color";
      }
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
